<template>
  <div class="orderList">
    <div class="topTitle">我的订单</div>
    <div class="orderitems">
      <div class="item" v-for="(item, index) in orderData.data" :key="index">
        <div class="item__title">
          <span class="shopName">{{ item.shopName }}</span>
          <span class="tag"> {{ item.isCanceled ? "已取消" : "已完成" }}</span>
        </div>
        <div class="item__content">
          <div class="item__content__imgs">
            <template
              v-for="(innerItem, innerIndex) in item.products"
              :key="innerIndex"
            >
              <img
                class="item__content__img"
                :src="innerItem.product.img"
                alt=""
              />
            </template>
          </div>
          <div class="item__content__info">
            <span class="money">&yen;{{ item.totalPrice.toFixed(2) }}</span>
            <span class="count">共{{ item.totalCount }}件</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Docker :activeIndex="2" />
</template>

<script>
import Docker from "@/components/docker";
import { computed, reactive } from "vue";
import { get } from "@/API/axios.js";

export default {
  name: "order",
  components: { Docker },
  setup() {
    //基础数据
    // const { cartList } = useCommonCartEffect();
    // const dataList = computed(() => {
    //   let list = [];
    //   for (let key in cartList) {
    //     let count = 0;
    //     let totalPrice = 0;
    //     for (let g in cartList[key].productList) {
    //       let item = cartList[key].productList[g];
    //       if (item.count > 0) {
    //         count += item.count;
    //         totalPrice += item.count * item.price;
    //       }
    //     }
    //     list.push({
    //       shopName: cartList[key].shopName,
    //       products: cartList[key].productList,
    //       totalPrice,
    //       count,
    //     });
    //   }
    //   return list;
    // });

    //获取后台订单数据
    const orderData = reactive({ data: {} });
    //整理后台数据
    const filterData = (data) => {
      for (let key in data) {
        let totalCount = 0;
        let totalPrice = 0;
        const shop = data[key];
        const products = shop.products;
        products.forEach((element) => {
          totalCount += element.orderSales;
          totalPrice += element.product.price * element.orderSales;
        });
        shop.totalCount = totalCount;
        shop.totalPrice = totalPrice;
      }
    };

    const getOrderDataList = async () => {
      try {
        const res = await get("api/order");
        if (res.errno === 0) {
          orderData.data = res.data;
          filterData(orderData.data);
        }
      } catch (error) {
        console.log(error);
      }
    };

    getOrderDataList();

    return { orderData };
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.orderList {
  position: absolute;
  top: 0;
  bottom: 0.5rem;
  left: 0;
  right: 0;
  overflow: hidden;
  background-color: $searchBgc-color;
}

.topTitle {
  width: 100%;
  height: 0.45rem;
  line-height: 0.45rem;
  text-align: center;
  font-size: 0.16rem;
  color: $content-color;
  background-color: $white-color;
}

.orderitems {
  height: 2rem;
  .item {
    height: 1.1rem;
    width: 3.4rem;
    margin: 0.16rem auto;
    background-color: $white-color;
    border-radius: 0.04rem;
    padding: 0.16rem;
    .item__title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.12rem;
      .shopName {
        line-height: 0.22rem;
        font-weight: 600;
        font-size: 0.16rem;
        color: $content-color;
      }
      .tag {
        font-size: 0.14rem;
        color: $light-font-color;
        text-align: right;
      }
    }
    .item__content {
      display: flex;
      justify-content: space-between;

      &__imgs {
        width: 2rem;
        height: 0.6rem;
        overflow: hidden;
        .item__content__img {
          width: 0.4rem;
          height: 0.4rem;
          margin-right: 0.1rem;
        }
      }
      &__info {
        height: 0.4rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .money {
          font-size: 0.14rem;
          color: $highlight-color;
          text-align: right;
        }
        .count {
          font-size: 0.12rem;
          color: $content-color;
          text-align: right;
          line-height: 0.14rem;
        }
      }
    }
  }
}
</style>
